{% include 'QLGL/QLGL_index.html' %}

<div class="am-cf admin-main">
  {% include 'sidebar.html' %}
  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">字典数据</strong></div>
      </div>
      <div class="am-g" style="position: absolute;height: 100%;right: 0px;left: 260px;width: auto;">

        {% include 'QLGL/ZDSJ/QLGL_ZDSJ_SIDEBAR.html' %}
        <div class="am-u-sm-10" style="position: absolute;width: 100%;left: 200px;right:0px;height: auto;bottom: 0px;top: 0px;width: auto;">
          <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
              <button style="margin: 0 5px" type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="bridge_add()"><span class="am-icon-plus"></span>新增</button>
              <button style="margin: 0 5px" type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" onclick="bridge_modify()"><span class="am-icon-pencil-square-o"></span>修改</button>
              <button style="margin: 0 5px" type="button" class="am-btn am-btn-default am-btn-xs am-text-danger" onclick="bridge_delect()"><span class="am-icon-trash-o"></span>删除</button>
            </div>
          </div>

          <div class="am-u-sm-4" style="background-color: rgba(0,0,0,0);overflow-y: scroll;position: absolute;margin: 10px;width: 250px;height: auto;bottom: 100px;top:29px;">
            <ul class="am-tree am-tree-folder-select" role="tree" id="myTreeSelectableFolder">
              <li class="am-tree-branch am-hide" data-template="treebranch" role="treeitem" aria-expanded="false">
                <div class="am-tree-branch-header">
                  <button class="am-tree-icon am-tree-icon-caret am-icon-caret-right"><span class="am-sr-only">Open</span></button>
                  <button class="am-tree-branch-name">
                    <span class="am-tree-icon am-tree-icon-folder"></span>
                    <span class="am-tree-label"></span>
                  </button>
                </div>
                <ul class="am-tree-branch-children" role="group"></ul>
                <div class="am-tree-loader" role="alert">Loading...</div>
              </li>
              <li class="am-tree-item am-hide" data-template="treeitem" role="treeitem">
                <button class="am-tree-item-name">
                  <span class="am-tree-icon am-tree-icon-item"></span>
                  <span class="am-tree-label"></span>
                </button>
              </li>
            </ul>
          </div>
          <div class="am-u-sm-8" style="float: left;left: 260px">
            <div class="am-u-sm-12 am-u-md-12 ">
              <!--中间侧块 注意下面是form表-->

              <label><strong>详细情况</strong> </label>

              <table id="grid" class="am-table am-table-striped am-table-hover table-main am-table-compact am-text-nowrap dataTable no-footer" width="100%" role="grid" style="width: 100%;">

                <tbody>
                  <tr class="odd">
                    <td class="sorting_1" style="border: 1px solid #ddd;width: 200px">编码</td>
                    <td id="td_bm" style="border: 1px solid #ddd"></td>
                  </tr>
                  <tr class="odd">
                    <td class="sorting_1" style="border: 1px solid #ddd;width: 200px">名称</td>
                    <td id="td_mc" style="border: 1px solid #ddd"></td>
                  </tr>
                  <tr class="odd">
                    <td class="sorting_1" style="border: 1px solid #ddd;width: 200px">序号</td>
                    <td id="td_xh" style="border: 1px solid #ddd"></td>
                  </tr>
                  <tr class="odd">
                    <td class="sorting_1" style="border: 1px solid #ddd;width: 200px">状态</td>
                    <td id="td_zt" style="border: 1px solid #ddd"></td>
                  </tr>
                  <tr style="display: none;">
                    <td class="sorting_1" style="border: 1px solid #ddd;width: 200px"></td>
                    <td id="td_id" style="border: 1px solid #ddd"></td>
                  </tr>

                </tbody>
              </table>

              <div class="am-btn-toolbar">
                <div class="am-btn-group am-btn-group-xs">
                  <input type="file" name="f_fileXC" id="f_fileXC" accept=".csv" style="display: none;">
                  <button style="margin: 0 5px" type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary"  id="file_add">导入</button>
                  <button style="margin: 0 5px" type="button" class="am-btn am-btn-default am-btn-xs am-text-secondary" >导出</button>

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% include 'footer.html' %}
<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="/static/assets/js/jquery.min.js"></script>
<!--<![endif]-->
<script src="/static/assets/js/amazeui.min.js"></script>
<script src="/static/assets/js/amazeui.tree.js"></script>
<script type="text/javascript" src="/static/assets/js/layer.js"></script>
<script src="/static/assets/datatables/amazeui.datatables.min.js"></script>
<script src="/static/assets/dialog/amazeui.dialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/assets/css/amazeui.tree.css" />
<script src="/static/assets/js/app.js"></script>
<style type="text/css">
  .li_a {
    color: #5c5c5c;
  }
</style>
<script type="text/javascript">
  $("#collapse-nav1").addClass("am-in");
  $("#qlgl").removeClass("am-collapsed");
  $("#qlglOzdsj").css("color", "#3399CC");
  $("#qlgl").css("color", "#3399CC");
  $("#zdsjOqlcs").removeClass("li_a");

  function bridge_add() {
    var param_id = $("#td_id").text();
    if(param_id == ""){
      param_id = 0
    }
    //window.location.href="/XTGL_BMGL_ADD/"
    popup1("新增", "/QLXJ_QLCS_ADD/?param_id=" + param_id + "")
  }

  function bridge_modify() {
    var param_id = $("#td_id").text();
    if(param_id == "") {
      AlertMSG("请选择一个节点！")
    } else {
      popup2("修改", "/QLXJ_QLCS_MOD/?param_id=" + param_id + "")
    }

  }

  function bridge_delect() {
    var param_id = $("#td_id").text();
    var param_name = $("#td_mc").text();
    if(param_id == "") {
      AlertMSG("请选择一个节点！")
    } else {
      AMUI.dialog.confirm({
        title: '删除确认',
        content: '您确认删除[' + param_name + ']?',
        onConfirm: function() {

          $.ajax({
            "url": "/QLXJ_QLCS_DEL/?param_id=" + param_id + "",
            "datatype": "json",
            "type": "get",
            "async": "false"
          }).success(function(data) {
            if(data.status == 1) {
              window.location.reload();
            } else {
              AlertMSG(data.message)
            }
          }).error(function(data) {
            AlertMSG("删除失败！")
          });

          //console.log('onConfirm,save ' + organize_id);

        },
        onCancel: function() {
          console.log('onCancel')
        }
      });
    }
  };

  function popup1(title, url) {
    var index = layer.open({
      type: 2,
      title: title,
      content: url,
      area: ['600px', '370px'],

    });
    //铺满界面
    //layer.full(index);
  }

  function popup2(title, url) {
    var index = layer.open({
      type: 2,
      title: title,
      content: url,
      area: ['600px', '320px'],

    });
    //铺满界面
    //layer.full(index);
  }


  $("#file_add").click(function(){
    $("#f_fileXC").click();
  })


  var upimg = document.querySelector('#f_fileXC');
  upimg.addEventListener('change', function(e) {
    var files = this.files;
    if(files.length) {
      if(checkFile(files)) {
        uploadFiles(files);
      }
    }
  });

  function checkFile(files) {
    if(files.length == 1) {
      //console.log(files[0].type);
      if(!files[0].type.match(/.ms-excel/)) { //判断上传文件格式
        AlertMSG('上传的文件格式不正确')
        return false;
      }
      return true;
    } else {
      AlertMSG('只能上传一个文件')
      return false;
    }
  }

  var uploadFiles = function(files) {
    var form_data = new FormData();
    form_data.append("myfile", files[0]);
    // 提交ajax的请求
    $.ajax({
        url: "/uploadFile/",
        type: 'POST',
        data: form_data,
        processData: false, // tell jquery not to process the data
        contentType: false, // tell jquery not to set contentType
        success: function(result) {
          //console.log(result.data)
          if(result.status == 1) {
            alert("上传成功！")

          } else {
            AlertMSG(result.message)
          }

        }
      
    });
  }
</script>

<script type="text/javascript">
  var bridge_data = []
  $.ajax({
    "url": "/QLXJ_QLCS_TREE/",
    "datatype": "json",
    "type": "get",
    "async": "false"
  }).success(function(data) {
    if(data.status == 1) {
      read_bridge(data.data);
      bridge_data = data.data;
    } else {
      AlertMSG(data.message)
    }
  }).error(function(data) {
    AlertMSG("读取桥梁参数失败！")
  });

  function read_bridge(information) {
    var data = [];
    var bridge_1 = {}
    for(var i = 0; i < information.length; i++) {
      var bridge_2 = []
      for(var j = 0; j < information[i].subdata.length; j++) {
        var bridge_3 = {
          title: information[i].subdata[j].param_name,
          type: 'item',
          attr: {
            id: information[i].subdata[j].param_id,
          }
        }
        bridge_2.push(bridge_3)
      }

      var bridge_1 = {
        title: information[i].param_name,
        type: 'folder',
        attr: {
          id: information[i].param_id
        },
        products: bridge_2
      }
      data.push(bridge_1)
    }

    var tree = $('#myTreeSelectableFolder');
    tree.tree({
      dataSource: function(options, callback) {
        // 模拟异步加载
        setTimeout(function() {
          callback({
            data: options.products || data
          });
        }, 400);
      },
      multiSelect: false,
      cacheItems: true,
      folderSelect: true,
    });
    tree.on('selected.tree.amui', function(event, data) {
      // do something with data: { selected: [array], target: [object] }
      //alert(data.selected[0].attr.id);
      check_bridge(data.selected[0].attr.id)
    });

  }

  var AlertMSG = function(msg) {
    AMUI.dialog.alert({
      title: '错误提示',
      content: msg,
      onConfirm: function() {
        console.log('close');
      }
    });
  }

  function check_bridge(param_id) {
    for(var i = 0; i < bridge_data.length; i++) {
      if(bridge_data[i].param_id == param_id) {
        table(bridge_data[i])
      } else {
        for(var j = 0; j < bridge_data[i].subdata.length; j++) {
          if(bridge_data[i].subdata[j].param_id == param_id) {
            table(bridge_data[i].subdata[j])
          }
        }
      }
    }

  }

  function table(data) {
    $("#td_bm").html(data.param_code);
    $("#td_mc").html(data.param_name);
    $("#td_xh").html(data.orderby);
    $("#td_zt").html("有效");
    $("#td_id").html(data.param_id);
  }
  /*
  tree.tree('selectItem', $('#1234'))
  $('#btnTest').on('click', function() {
    tree.tree('toggleFolder', $('#folderId'));
  })
  */
  /*
  $(function(){
      $("#1234").addClass("am-tree-selected");
  $("#1234 span:eq(1)").removeClass("am-icon-angle-right");
  $("#1234 span:eq(1)").addClass("am-icon-check");
})
*/
  //tree.tree('discloseAll');
</script>
</body>

</html>